import _ from "lodash";
import {useState} from "react";
import {Button, Form, Modal, Table, Input, message} from "antd";
import {useNavigate, Outlet, useLocation} from "react-router-dom";
import {
    columnsOpenid,
    columnsCreateTime,
    columnsSetting,
    columnsIdentity,
    columnsHeaderImg,
    getColumnsId,
    getColumnsName,
} from "@/components/Columns";
import {marginLeft, userType} from "@/utils";
import {CustomFormItem, SelectFormItem} from "@/components/common/form/formItem";
import useList from "@/hooks/useList";
import {deleteUser, getUserInfo} from "@/api";

const {Search} = Input;

export default function UserList() {
    const nav = useNavigate();
    const location = useLocation();
    const [type, setType] = useState(""); // join 和edit
    const [nickName, setNickName] = useState("");

    const {data, refresh} = useList(
        {
            api: getUserInfo,
            params: {identity: type, nickName},
        },
        [type, nickName]
    );

    const handleDelete = row => {
        Modal.error({
            title: "删除用户",
            content: `是否删除当前用户：${row.nickName}`,
            okText: "确认",
            onOk: async () => {
                try {
                    await deleteUser(row.openId);
                    refresh();
                    message.success("删除用户成功", 5);
                } catch (error) {
                    message.error("删除失败");
                }
            },
        });
    };

    const handleEdit = (row: any) => nav(`/home/user/list/${row.openId}`);
    const columns = [
        getColumnsId(data),
        getColumnsName(),
        columnsHeaderImg,
        columnsIdentity,
        columnsOpenid,
        columnsCreateTime,
        {
            ...columnsSetting,
            render: (_: any, row: any) => (
                <div className="flr" style={{width: 150}}>
                    <Button type="primary" size="small" onClick={() => handleEdit(row)}>
                        查看详情
                    </Button>
                    <Button type="primary" size="small" danger onClick={() => handleDelete(row)}>
                        删除
                    </Button>
                </div>
            ),
        },
    ];

    return (
        <>
            {location.pathname === "/home/user/list" ? (
                <div className="components-list">
                    <Form className="fl">
                        <SelectFormItem
                            label="用户类型"
                            initialValue={type}
                            options={_.map(userType, ({id, value}) => ({label: value, value: id}))}
                            onChange={setType}
                        />
                        <CustomFormItem label="用户名" style={marginLeft}>
                            <Search style={{width: 240}} allowClear onSearch={setNickName} placeholder="请输入昵称" />
                        </CustomFormItem>
                    </Form>
                    <Table rowKey={row => JSON.stringify(row)} dataSource={data.list} columns={columns} />
                </div>
            ) : (
                <Outlet />
            )}
        </>
    );
}
